<template>

    <div class="d-flex  justify-content-center align-items-center position-relative">
        <el-form :model="loginForm" :rules="rules" ref="loginRef" label-width="0"
            class="login-container px-5 pt-5 pb-5 bg-white shadow-sm rounded rounded-4"
            :class="[{ 'small': !$attrs.carouselImages || !$attrs.carouselImages.length }, $attrs.class]"
            :style="$attrs.style">
            <div class="mb-1">
                <h3 class="mb-4 text-center">{{ $attrs.name }}</h3>
                <el-row :gutter="20">
                    <el-col :span="12" class="text-center pe-3"
                        v-if="$attrs.carouselImages && $attrs.carouselImages.length > 0">
                        <el-carousel direction="vertical">
                            <el-carousel-item v-for="url in $attrs.carouselImages" :key="url">
                                <el-image style="width: 300px; height: 300px" fit="contain" :src="url"
                                    class="opacity-100 rounded rounded-3" />
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                    <el-col :span="$attrs.carouselImages && $attrs.carouselImages.length ? 12 : 24"
                        class="text-center mt-3">
                        <el-form-item prop="user_name" class="mb-3 mt-3 px-3">
                            <el-input :size="$attrs.ctlSize" v-model.number="loginForm.user_name"
                                :placeholder="$attrs.userNamePlaceholder" maxlength="11" :prefix-icon="User"
                                @focus="clearErrorMessage" clearable>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password" class="mt-5 px-3">
                            <el-input :size="$attrs.ctlSize" type="password" v-model="loginForm.password"
                                :placeholder="$attrs.passwordPlaceholder" maxlength="16" :prefix-icon="Lock"
                                show-password @focus="clearErrorMessage" clearable>
                            </el-input>
                        </el-form-item>

                        <div class="alert-wrapper text-left">
                            <div v-if="errorMessage" class="text-danger w-100">
                                {{ errorMessage }}
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-2 w-100" v-if="$attrs.registerBtnText">
                            <a href="/register" class="text-end na">{{ $attrs.registerBtnText }}</a>
                        </div>
                        <div class="d-flex justify-content-center mt-4">
                            <el-button :size="$attrs.ctlSize" :type="$attrs.btnType" :loading="loading" class="w-100"
                                @click="submitForm">{{
                                    $attrs.loginBtnText || '登 录' }}</el-button>
                        </div>
                    </el-col>
                </el-row>
                <div class="text-center mt-4 text-black-50" v-if="$attrs.systemDesc">
                    {{ $attrs.systemDesc }}
                </div>
            </div>
        </el-form>
        <footer class="text-center position-absolute bottom-0 w-100" :class="$attrs.footerClass">
            <a v-if="$attrs.copyright" class="no-underline" style="opacity: 0.7" href="https://beian.miit.gov.cn/">{{
                $attrs.copyright }}</a>
        </footer>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import MD5 from "crypto-js/md5";
import { emitLogin } from "xcore/data";
import $utils from 'xcore/utils';
import { User, Lock } from "@element-plus/icons-vue";
import _ from "lodash";
const rules = {
    user_name: [{ required: true, message: "请输入用户名或手机号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};
interface LoginForm {
    user_name: string | number;
    password: string;
}


const loginForm = reactive<LoginForm>({
    user_name: window.$theia.cache.get("cache").user_name || "",
    password: "",
});


$utils.watch.backgroundImageInStyle("background-image");
$utils.watch.pageTitle("label");

const loginRef = ref<null | HTMLElement>(null);
const errorMessage = ref<string | null>(null);
const loading = ref<boolean>(false);


const submitForm = async () => {
    (loginRef.value as any).validate((valid: boolean) => {
        if (valid) {
            loading.value = true;
            let login = {
                user_name: loginForm.user_name,
                password: MD5(loginForm.password + "").toString(),
                callback: () => {
                    window.location.href = "/";
                },
                errorCallback: (err: any) => {
                    errorMessage.value = err.message;
                    loading.value = false;
                }
            }
            emitLogin(login);
            window.$theia.cache.add("cache", "user_name", login.user_name);
        }
    });
};

const clearErrorMessage = () => {
    errorMessage.value = null;
};

</script>

<style scoped>
/* 样式保持不变或根据需要调整 */
body {
    background-color: darkgray;
    background-repeat: repeat-y;
    background-position: center center;
    background-size: auto;
    background-attachment: fixed;
}

.login-container {
    font-size: 0.875rem;

}

a {
    text-decoration: none;
    font-size: 0.815rem;
}

@media (max-width: 4000px) {
    .login-container {
        width: 1000px;
        height: auto;
    }

    .login-container.small {
        width: 620px;
    }

}

@media (max-width: 1300px) {
    .login-container {
        width: 800px;
        height: auto;
    }

    .login-container.small {
        width: 560px;
    }
}

.alert-wrapper {
    /* 设置固定高度 */
    height: 28px;
    /* 或者你需要的高度 */
    font-size: 0.915rem;
    padding-left: 2em;
}
</style>